<!--
 * @Description: 
 * @Version: 
 * @Author: 学渣小明
 * @Date: 2022-05-03 11:19:47
 * @LastEditors: 学渣小明
 * @LastEditTime: 2022-05-03 11:56:47
-->
<link rel="stylesheet" href="/web/public/css/cover-icon.css">
<div id="product">
  <div class="recommend-products">
    <div class="title">
      <h2 class="title_h2">
        <i class="title-line"></i>
        <a href="javasecipt:" title="新品推荐">新品推荐</a>
      </h2>
    </div>
    <div class="slide-pic swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide cover">
          <a href="javascript:" title="标题">
            <img src="/web/img/banner-2.jpg" alt="">
          </a>
          <img class="left-top-icon" src="/web/img/special.png" alt="文本类">
          <img class="large-play x-y-center" src="/web/img/play-icon.png" alt="音视频类">
        </div>
      </div>
      <div class="pagination"></div>
      <div class="swiper-button-prev swiper_btn"></div>
      <div class="swiper-button-next swiper_btn"></div>
    </div>
    <ul class="deep-img-list">
      <li>
        <a class="cover" href="javascript:" title="江阴汽车改装厂转化科技成果东方">
          <img src="/web/img/deep-1.png" alt="深度阅读">
          <img class="article-icon" src="/web/img/special.png" alt="文本类">
          <img class="play-icon" src="/web/img/play-icon.png" alt="音视频类">
        </a>
        <h3><a href="###" class="title" title="江阴汽车改装厂转化科技成果东方">江阴汽车改装厂转化科技成果东方</a></h3>
      </li>
    </ul>
    <ul class="content-list">
      <li>
        <div class="left">
          <a class="cover" href="javascript:" title="标题最多显示20个字符,字号20像素#333333">
            <img src="/web/img/list-img-1.png" alt="图片">
            <img class="article-icon" src="/web/img/special.png" alt="文本类">
            <img class="play-icon" src="/web/img/play-icon.png" alt="音视频类">
          </a>
        </div>
        <div class="right">
          <h3 class="title">
            <a href="javascript:" title="标题最多显示20个字符,字号20像素#333333">标题最多显示20个字符,字号20像素#333333</a>
          </h3>
          <p>
            <a href="javascript:" title="内容介绍最多显示55各自,字号14像素#7f7f">
              内容介绍最多显示55各自,字号14像素#7f7f7f企业都在苦苦挣扎，长城汽车每月销量却在逆势增长增长增长增长对对对。
            </a>
          </p>
          <div class="info">
            <i class="iconfont icon-shijian"></i><span>2020-09-08</span>
  
            <a href="javascript:" class="tag">集采机构</a>
            <a href="javascript:" class="tag">采购人</a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

<script>
  $(function () {
    var slidIndex = 0;
    var mySwiper = new Swiper('.recommend-products .swiper-container', {
      loop: true,
      autoplay: false,
      initialSlide: slidIndex,
      pagination: '.recommend-products .pagination',
      paginationClickable: true,
      onSlideChangeEnd: function (e) {
        slidIndex = e.activeLoopIndex;
        sessionStorage.setItem('slidIndex', slidIndex);

      },
    });
    $('.recommend-products .swiper-button-prev').on('click', function (e) {
      e.preventDefault()
      mySwiper.swipePrev();
    });
    $('.recommend-products .swiper-button-next').on('click', function (e) {
      e.preventDefault()
      mySwiper.swipeNext();
    });
  })
</script>